<template>
    <div class="mainDiv">
        <div class="rowHead">
            <el-date-picker class="w300" v-model="times" type="daterange" align="right" placeholder="选择日期范围（默认当天日期）" :picker-options="timeArea" @change="getList" v-qx="permission.date">
            </el-date-picker>
        </div>
        <el-row :gutter="20">
        <el-col :span="8" class="pl0">
            <el-table :data="dlist" :stripe="true" @expand-change="showChilds" height="673">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div style="display:flex;justify-content: space-between;">
                            <span>【小组】</span>
                            <span>【业绩】</span>
                        </div>
                        <div style="display:flex;justify-content: space-between;padding: 5px;" v-for="x in scope.row.list">
                            <span class="block w50 fl center">{{x.dname}}</span>
                            <el-button size="mini" @click="look(x.did, 3)">{{x.total+' 元'}}</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="dname" label="部门" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="total" label="业绩">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="look(scope.row.did, 2)" style="margin-top:2px;">{{scope.row.total+' 元'}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="16" class="pr0">
            <el-table :data="ylist" :stripe="true">
                <el-table-column prop="ordertype" label="业绩类型"></el-table-column>
                <el-table-column prop="name" label="员工姓名"></el-table-column>
                <el-table-column prop="worknum" label="员工工号"></el-table-column>
                <el-table-column prop="xianjinyeji" label="业绩金额"></el-table-column>
                <el-table-column prop="addtime" label="业绩时间" show-overflow-tooltip>
                    <template slot-scope="scope">
                        {{scope.row.addtime|hourTime}}
                    </template>
                </el-table-column>
                <el-table-column label="详情">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-h-chakan" size="mini" @click="chakan(scope.row)" v-qx="permission.info"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block center bg-light">
                <el-pagination layout="prev, pager, next" :page-size="page.limits" @current-change="currpage" :total="total">
                </el-pagination>
            </div>
        </el-col>
        </el-row>
        
    </div>
</template>
<script>
import C from '#/src/common/common.js'
import P from '#/src/shop/popup.js'

export default {
    name: 'featList',
    data() {
        return {
            dlist: [],
            ylist: [],
            page: {
                pages: 1,
                limits: 15,
            },
            total: 0,
            times: [new Date(), new Date()],
            timeArea: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, td])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const td = new Date()
                        td.setHours(0)
                        td.setMinutes(0)
                        td.setSeconds(0)
                        td.setMilliseconds(0)
                        const start = new Date()
                        start.setTime(td.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, td])
                    }
                }]
            },
            pid: 0,
            floor: 0,
            permission: {
                date: 'bumenfeat_date',
                info: 'bumenfeat_info',
            }
        }
    },
    methods: {
        showChilds: async function(row) {

            let rdata = {
                pid: row.did,
                times: JSON.stringify(this.times)
            }

            if (!this.times) {
                rdata.times = JSON.stringify([new Date(), new Date()])
            }
            let res = await C.ajax('/shop/money/getfeatchild', rdata, 'post')
            if (res) row.list = res
        },

        look: function(id, fr) {
            this.pid = id
            this.floor = fr
            this.getInfo()
        },

        chakan: async function(row) {
            let obj = { id: row.orderid, ordertype: row.ordertype }
            await P.showOrderPopup(obj)
        },

        currpage: function(val) {
            this.page.pages = val
            this.getInfo()
        },

        getInfo: async function() {
            let ydata = {
                pid: this.pid,
                floor: this.floor,
                times: JSON.stringify(this.times),
                page: JSON.stringify(this.page),
            }
            if (!this.times) {
                ydata.times = JSON.stringify([new Date(), new Date()])
            }
            let res = await C.ajax('/shop/money/getfeatlist', ydata, 'post')
            if (res) {
                this.total = res.count
                this.ylist = res.data
            }
        },

        getList: async function() {
            this.dlist = []
            this.ylist = []

            if (!this.times) {
                this.times = [new Date(), new Date()]
            }
            let res = await C.ajax('/shop/money/getfeatinfo', { times: JSON.stringify(this.times) }, 'post')
            if (res) {
                res.forEach((v) => {
                    v.list = []
                })
                this.dlist = res
            }
        }
    },
    mounted: function() {
        this.getList()
    }
}
</script>